<template>
	<view class="content">
		<view class="mp-search-box" @click="naviageToPage('/pages/product/search')">
			<uni-search-bar bgColor="#F6F6F6" placeholder="点击搜索" readonly />
		</view>
		<!-- 销量top -->
		<view class="guess-section">
			<view class="guess-item" v-for="(item, index) in salesTop" :key="index" @click="navToDetailPage(item.id)">
				<image :src="item.img + '?x-oss-process=style/400px'" mode="aspectFill"></image>
				<view class="txtBox">
					<view class="title clamp">{{item.title}}</view>
					<view class="price">
						￥{{isVip ? (item.vipPrice / 100 + ' [VIP]') : item.price / 100}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				windowSpuList: [],
				categoryPickList: [],
				categoryButtomList: [],
				salesTop: [],
				banner: undefined,
				isVip: false,
				obtainedCoupon: false,
				targetCouponId: undefined
			};
		},
		onShow() {
			this.isVip = this.$api.isVip()
			if (this.targetCouponId && !this.obtainCoupon) {
				this.tryObtainCoupon(this.targetCouponId)
			}
		},
		onLoad(options) {
			const that = this
			if (options.couponid) {
				that.targetCouponId = options.couponid
				that.tryObtainCoupon(options.couponid)
			}
			//#ifdef H5
			//H5进入，有可能是回调进来的
			if (options.code && options.state) {
				that.logining = true
				that.$api.request('user', 'thirdPartLogin', {
					loginType: 3,
					raw: options.code
				}, failres => {
					that.logining = false
					that.$api.msg(failres.errmsg)
				}).then(res => {
					//登录成功，重定向到指定目标
					that.logining = false
					that.$store.commit('login', res.data)
					uni.setStorageSync('userInfo', res.data)
					//重定向到
					//不能重定向到tabbar页面
					if (options.state === '/pages/cart/cart' || options.state === '/pages/user/user' ||
						options.state === '/pages/index/index' || options.state === '/pages/category/category') {
						uni.switchTab({
							url: options.state
						})
					} else {
						uni.redirectTo({
							url: options.state
						})
					}

				})
			}
			//#endif
			this.loadData()
			if (options.distribution) {
				// 若是分销链接
				uni.setStorage({
					key: 'distributionId',
					data: options.distribution
				})
			}
		},
		onShareAppMessage() {
			const that = this
			return {
				title: '果王来了',
				imageUrl: 'https://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/share.jpg',
				path: '/pages/index/index'
			}
		},
		onPullDownRefresh() {
			console.log(123)
		},
		onReachBottom() {
			console.log(456)
		},
		methods: {
			async loadData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				that.$api.request('integral', 'getIndexData', failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					let data = res.data
					//橱窗
					that.windowSpuList = data.windowRecommend
					//轮播
					data.advertisement.t1.forEach(item => {
						if (!item.color) {
							item.color = 'rgb(205, 215, 218)'
						}
					})
					that.carouselList = data.advertisement.t1
					that.swiperLength = data.advertisement.t1.length
					that.titleNViewBackground = data.advertisement.t1[0].color
					//分类精选
					if (data.advertisement.t2) {
						that.categoryPickList = data.advertisement.t2
					}
					//横幅
					if (data.advertisement.t3 && data.advertisement.t3.length > 0) {
						that.banner = data.advertisement.t3[0]
					}
					//热销
					if (data.salesTop) {
						that.salesTop = data.salesTop
					}
					//分类5Buttom
					if (data.advertisement.t4) {
						that.categoryButtomList = data.advertisement.t4
					}
					uni.hideLoading()
				})
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].color;
			},
			//详情页
			navToDetailPage(id) {
				console.log(id, '哈哈哈哈')
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
			navToWindowSuggestSpu(index) {
				const that = this
				uni.navigateTo({
					url: '/pages/product/detail?id=' + that.windowSpuList[index].spuId
				})
			},
			naviageToPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			tryObtainCoupon(couponId) {
				const that = this
				if (couponId && !that.obtainedCoupon) {
					uni.showModal({
						title: "优惠券",
						content: '您的好友给您分享了一张优惠券',
						confirmText: '立即领取',
						cancelText: '取消',
						success(e) {
							if (e.confirm) {
								that.$api.request('coupon', 'obtainCoupon', {
									couponId: couponId
								}, failres => {
									if (failres.errno !== 10001) {
										that.$api.msg(failres.errmsg)
										that.obtainedCoupon = true
									}
								}).then(res => {
									// 若领取成功,者标记已经领取
									that.obtainedCoupon = true
									that.$api.msg('领取优惠券成功！')
								})
							}
						}
					})
				}
			}
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url: '/pages/product/search'
			})
		},
		//点击导航栏 buttons 时触发
		// onNavigationBarButtonTap(e) {
		// 	const index = e.index;
		// 	if (index === 0) {
		// 		this.$api.msg('点击了扫描');
		// 	} else if (index === 1) {
		// 		// #ifdef APP-PLUS
		// 		const pages = getCurrentPages();
		// 		const page = pages[pages.length - 1];
		// 		const currentWebview = page.$getAppWebview();
		// 		currentWebview.hideTitleNViewButtonRedDot({
		// 			index
		// 		});
		// 		// #endif
		// 		uni.navigateTo({
		// 			url: '/pages/notice/notice'
		// 		})
		// 	}
		// }
		// #endif
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 160upx;

		.mp-search-box {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;

			/deep/.uni-searchbar {
				background: #fff !important;

				.uni-searchbar__box {
					border-radius: 50px !important;

					text {
						color: #272727 !important;
					}
				}
			}
		}
	}

	/* 猜你喜欢 */
	.guess-section {
		display: flex;
		flex-wrap: wrap;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 49%;
			margin-bottom: 20upx;
			background: #fff;
			border-radius: 6px;
			overflow: hidden;

			&:nth-child(2n+1) {
				margin-right: 2%;
			}

			image {
				width: 100%;
				height: 330upx;
				opacity: 1;
			}

			.txtBox {
				padding: 16upx;
				font-size: $font-lg;

				.title {
					color: $font-color-dark;
					margin-bottom: 10upx;
				}

				.price {
					color: $uni-color-primary;
				}
			}
		}
	}
</style>
